<template>
  <div>
    <div class="comment-list">
        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :error="error"
        error-text="加载失败，点击重试"
        :immediate-check="false"
        >
        <commentItemVue
            v-for="(item,index) in list" 
            :key="index" 
            :commentItemS="item"
            @reply_click="$emit('reply_click',$event)"
        />
        </van-list>
    </div>
  </div>
</template>

<script>
import {getComments} from '@/api/comment'
import commentItemVue from './comment-item.vue'
export default {
    name:'CommentList',
    props:{
        sourceID:{
            type:[Number,String,Object],
            required:true
        },
        list:{
            type:Array,
            default:()=>[]
        },
        type:{
            type:String,
            //自定义prop数据验证
            validator(val){
                return ['a','c'].includes(val)
            },
            default:'a'
        }
    },
    components:{
        commentItemVue
    },
    data() {
        return {
        // list: [],
        loading: false,
        finished: false,
        offset: null, //获取下一页数据的标记
        limit: 10, //评论条数
        error: false
        }
    },
    created(){
        //当手动初始,即设置immediate-check，onLoad，不会自动开启初始的loading,需要手动开启loading

        this.loading = true
        this.onLoad()  //开局就渲染全部内容
    },
    methods: {
        async onLoad() {
            //获取文章的评论和获取评论回复是同一个接口，区别在于接口参数
            //type a-文章评论 c-评论的回复
            //source
            //  文章的评论，则获取文章的ID， 评论的回复则获取评论的ID
            try{
                //1请求获取数据
                const {data} = await getComments({
                    type: this.type, //评论类型
                    source: this.sourceID.toString(), //id
                    offset: this.offset,
                    limit: this.limit //评论条数
                })
                //2将数据添加到列表中
                const {results} = data.data
                this.list.push(...results)

                //把文章的评论数量传给父组件
                this.$emit('onload_success',data.data)

                //3将loading关闭
                this.loading = false
                //4判断是否还有数据
                if(results.length){
                    //有就更新下一页数据
                    this.offset= data.data.last_id
                }else{
                    //没有则将finished设置为true
                    this.finished = true
                }
            }catch(err){
                this.error = true
                this.loading = false
            }
            
        }
    },
}
</script>

<style>

</style>